<template>
    <div>
        <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a :class="['mui-control-item',index=='tech'?'mui-active':'']"  v-for="(item,index) in Category" :key="index"
                   @click="fuzhi(index)">
                    {{item[0].category}}
                </a>
            </div>
        </div>
        </div>

        <h3>
        </h3>
        <ul>
            <li v-for="item in  list" :key="item.docid">
                <a :href="item.link">{{item.title}}</a>
            </li>
        </ul>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    //1.导入mui的js文件
    import mui from '../../lib/mui/js/mui.js'


    export default {
        data(){
            return{
                Category:[],
                keys:"",
                list:[],//图片列表的数组
                // list:this.Category["auto"],
            };
        },
        //2.初始化滑动控件
        mounted(){//当组件中的DOM结构被渲染好并放到页面中后会执行这个钩子函数
          //如果要操作元素，最好在mounted中，因为这时候的DOM元素是最新的。
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        created(){
            //调用getAllCategory方法
            this.getAllCategory();
            this.fuzhi("tech");
        },
        beforeMount(){

        },
        mounted(){

        },
        methods: {
            getAllCategory() {
                //获取所有的图片分类
                this.$http.get('journalismApi').then(result => {
                    if (result.body.code === 200) {
                        //手动拼接完整的分类列表
                        // result.body.data.unshift({title:"全部",id:0});
                        this.Category = result.body.data;
                    } else {
                        Toast("信息获取失败")
                    }
                })
            },
            fuzhi(index) {
                this.$http.get('journalismApi').then(result => {
                    if (result.body.code === 200) {
                        //手动拼接完整的分类列表
                        // result.body.data.unshift({title:"全部",id:0});
                        this.list = this.Category[index];
                    } else {
                        Toast("信息获取失败")
                    }

                })

            },
        }
    }
</script>

<style scoped lang="scss">
   *{
       touch-action: pan-y;
       margin: 0;
       padding: 0;
   }
   img[lazy=loading] {
       width: 40px;
       height: 300px;
       margin: auto;
   }
    ul,li{
        list-style: none;
    }
    ul{
        margin: 10px;
    }

</style>